<template>
  <div ref="popW">
    <div class="popContent">
      <div class="font-lan-l mb-3">
        测土点位：{{ data.pointName ? data.pointName : "暂无数据" }}
      </div>
      <!-- <el-scrollbar> -->
        <el-row :gutter="8">
          <el-col :span="24" class="mb-1">
            <span class="description">点位辖区：</span
            ><span class="font-lan-m">{{
              data.address ? data.address : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="24" class="mb-1">
            <span class="description">点位坐标：</span
            ><span class="font-lan-m">{{
              parseFloat(data.lon).toFixed(4)+'/'+parseFloat(data.lat).toFixed(4)
            }}</span>
          </el-col>
          <el-col :span="24" class="mb-1">
            <span class="description">最近测土时间：</span
            ><span class="font-lan-m">{{
              data.latestTime ? moment(data.latestTime).format('YYYY-MM-DD HH:mm:ss') : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">土壤类型：</span
            ><span class="font-lan-m">{{
              data.water != null ? data.water + '吨' : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">土壤等级：</span
            ><span class="font-lan-m">{{
              data.manure != null ? data.manure + 'Kg' : "暂无数据"
            }}</span>
          </el-col>
        </el-row>
        <div class="history" @click="getHistory">查看测土历史数据</div>
        <barChartM v-if="showChart" :data="history"/>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import {
  soilHistoricalData
} from "@/public/request/http";
import moment from 'moment'
import barChartM from "@/chart/barChart/bar-multi";
import { ElMessage } from "element-plus";
// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: {},
    require: true,
  },
} as const;
export default defineComponent({
  props: PropsType,
  components: {barChartM},
  setup(props) {
    //变量
    const colors = reactive({
      5: "#67c23a",
      4: "#409eff",
      3: "#e6a23c",
      2: "#f56c6c",
      1: "#99A9BF",
    });

    const history = reactive({
      xAxis:[],
      list:[],
      legend:[]
    })

    const showChart = ref(false)

    const getHistory = async ()=>{
      history.xAxis=[]
      history.list=[
        {name:'全氮',data:[],text:'allNitrogen'},
        {name:'全磷',data:[],text:'allPhosphorus'},
        {name:'全钾',data:[],text:'allPotassium'},
        {name:'速效氮',data:[],text:'availableNitrogen'},
        {name:'有效磷',data:[],text:'availablePhosphorus'},
        {name:'速效钾',data:[],text:'availablePotassium'},
        {name:'有机质',data:[],text:'organicMatter'},
        {name:'PH值',data:[],text:'ph'},
        {name:'缓效钾',data:[],text:'slowlyPotassium'}]
      history.legend=history.list.map(item=>item.name)
      try {
        let res = await soilHistoricalData({pointId:props.data.id});
        if(res.length > 0){
            res.forEach(item=>{
            history.xAxis.push(moment(item.createTime).format('MM-DD'))
              history.list.forEach(item1=>{
                console.log(item[`${item1.text}`]);
                
                item1.data.push(item[`${item1.text}`])
              })
              
              
            // history.list[0].data.push(item.allNitrogen)
            // history.list[1].data.push(item.allPhosphorus)
            // history.list[2].data.push(item.allPotassium)
            // history.list[3].data.push(item.availableNitrogen)
            // history.list[4].data.push(item.availablePhosphorus)
            // history.list[5].data.push(item.availablePotassium)
            // history.list[6].data.push(item.organicMatter)
            // history.list[7].data.push(item.ph)
            // history.list[8].data.push(item.slowlyPotassium)
            console.log(history.list);
          })
          showChart.value = true
        }else{
          ElMessage.error("历史数据为空");
        }
      } catch (error) {
        return
      }
    }

    // 生命周期
    onMounted(() => {
      //
      showChart.value = false
    });

    onUnmounted(() => {
      //
      showChart.value = false
    });

    watch(
      () => props.data,
      (val: any) => {
        //
        showChart.value = false
      },
      {
        immediate: true,
        deep: true,
      }
    );

    //methods

    // return
    return {
      colors,
      moment,
      getHistory,
      history,
      showChart
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.popContent {
  color: #fff;
  .description {
    font-size: 12px;
    font-family: Alibaba-PuHuiTi-Medium, Alibaba-PuHuiTi;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    line-height: 16px;
    -webkit-background-clip: text;
  }
}
.history{
  color: aquamarine;
  cursor: pointer;
}
</style>
